<template>
  <div>
     <el-aside width="200px">
     	<el-menu
     		:uniqueOpened="true"
     		class="el-menu-vertical-demo"
     		@open="handleOpen"
     		@close="handleClose"
     		background-color="#fff"
     		text-color="#000"
     		active-text-color="#fff">
     				<el-menu-item-group v-for="(v,i) in content" :index="i">
							<template #title>
								<h1 class="title">{{v.title}}</h1>
							</template>
     					<el-menu-item v-for="(v2,i2) in v.value" :index="i+'-'+i2">
     						<span class="itemTitle">{{v2.name}}</span>
     					</el-menu-item>
     				</el-menu-item-group>
     		</el-menu>
     </el-aside>
  </div>
</template>

<script>
  export default{
    name:'',
    data(){
      return {
        
      }
    },
    computed:{
      showGoods(){
        return 0
      }
    },
    props:{
      content:{
        type:Array,
        default(){
          return [
						{
							title:'热度榜',
							value:[
								{name:"飙升榜",url:"#"},
								{name:"热歌榜",url:"#"},
								{name:"新歌榜",url:"#"},
								{name:"MV榜",url:"#"},
							]
						},
						{
							title:'地区榜',
							value:[
								{name:"内地榜",url:"#"},
								{name:"港台榜",url:"#"},
								{name:"欧美榜",url:"#"},
								{name:"日本榜",url:"#"},
							]
						},
						{
							title:'世界榜',
							value:[
								{name:"BillBoard榜",url:"#"},
								{name:"UK榜",url:"#"},
								{name:"欧美榜",url:"#"},
								{name:"日本榜",url:"#"},
							]
						},
					]
        }
      }
    },
    methods:{
      handleSelect(key, keyPath) {
      	console.log(key, keyPath);
      },
      handleOpen(key, keyPath) {
      	console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
      	console.log(key, keyPath);
      },
      to(route){
      	// console.log(route);
      	this.$router.push('/'+route)
      }
    },
    components:{
       
    },
    created(){
      
    },
    activated(){
    
    },
    mounted(){
    
    },
    updated(){
      
    },
    deactivated(){
    
    },
    destroyed(){
    
    },
  }
</script>

<style scoped>
	.title{
		color: #000000;
		font-size: var(--font-big-size);
	}
	.itemTitle{
		font-size: var(--font-middle-size);
	}
</style>
